<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>商品信息页面</title>
	<link type="text/css" rel="stylesheet" href="../css/style.css"/>
	<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
	<script type="text/javascript" src="../js/javascript.js"></script>
	<script type="text/javascript" src="../js/vue.min.js"></script>
	<script type="text/javascript" src="../js/httpVueLoader.js"></script>
	<script type="text/javascript" src="../js/index.js"></script>
	<script type="text/javascript" src="../js/node_modules/axios/dist/axios.js"></script>
</head>
<body>
<div id="productApp">
	<top-protal></top-protal>

	<div id="middle">
		<div id="position">
			您现在的位置是&nbsp;&gt;&nbsp;<a href="index.html">网上商城</a>&nbsp;&gt;&nbsp;商品信息
		</div>
		<div id="productImg"><img src="../images/productImg/${product.product_imgurl}"/></div>
		<div id="productInfo">
			<table>
				<tr>
					<td class="product">${product.product_name}</td>
				</tr>
				<tr>
					<td class="product">${product.product_describe}</td>
				</tr>
				<tr>
					<td class="product">￥${product.product_price}</td>
				</tr>
				<tr>
					<td>
						<c:forEach var="category" items="${categorylist}">
							<c:if test="${category.category_id==product.category_id}">商品类别：${category.category_name}</c:if>
						</c:forEach>
					</td>
				</tr>

				<tr>
					<td>销量：${product.product_sales}&nbsp;&nbsp;&nbsp;库存：${product.product_stock}</td>
				</tr>
				<tr>
					<td>
						<input type="button" value="-" class="modifyButton" name="minus" onclick="minus(this)"/>
						<input type="text" size="4" value="1" disabled="disabled" class="num"/>
						<input type="button" value="+" class="modifyButton" name="plus" onclick="plus(this)"/>
					</td>
				</tr>
				<tr>
					<td>上架时间：${product.product_date}</td>
				</tr>
				<tr>
					<td>
						<c:if test="${!result}">
							<a href="../ShopCarServlet?action=addshopcar&product_id=${product.product_id}">
								<input type="submit" value="加入购物车" class="button"/>
							</a>
						</c:if>
						<c:if test="${result}">
							<input type="submit" value="已在购物车中" disabled="disabled" class="button"/>
						</c:if>
						<input type="submit" value="立即购买" class="button" onclick="account()"/>
						<script>
							function account(){
								var productid = ${product.product_id};
								var num = document.getElementsByClassName("num")[0].value*1;
								var price = ${product.product_price};
								var sumprice = num * price;
								location.href="../OrderServlet?action=tobuy&productidArr=/"+productid+"&productnumberArr=/"+num+"&sumpriceArr=/"+sumprice;
							}
						</script>
						<a href="../ChatServlet?action=tochat">
							<input type="submit" value="联系客服" class="button"/>
						</a>
					</td>
				</tr>
			</table>
		</div>
		<div id="message">
			<p>&gt;用户留言</p>
			<c:if test="${messagelist.size()==0}"><div id="nomessage">该商品暂无留言</div></c:if>
			<c:if test="${messagelist.size()!=0}">
				<c:forEach var="message" items="${messagelist}">
					<div id="messageinfo">
						<table>
							<tr style="font-weight:bolder">
								<td style="width:200px;">留言用户名：
									<c:forEach var="messageuser" items="${messageuserlist}">
										<c:if test="${messageuser.id==message.message_userid}">${messageuser.username}</c:if>
									</c:forEach>
								</td>
								<td style="width:200px;">${message.message_datetime}</td>
								<td></td>
								<td></td>
							</tr>
							<tr>
								<td colspan="4">留言内容：${message.message_contents}</td>
							</tr>
							<c:if test="${!message.reply_contents.equals('')}">
								<tr style="font-weight:bolder">
									<td></td>
									<td>回复者：
										<c:forEach var="messageuser" items="${messageuserlist}">
											<c:if test="${messageuser.id==message.reply_userid}">${messageuser.username}</c:if>
										</c:forEach>
									</td>
									<td style="width:200px;">${message.reply_datetime}</td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td colspan="3">回复内容：${message.reply_contents}</td>
								</tr>
							</c:if>
						</table>
					</div>
				</c:forEach>
			</c:if>
		</div>
	</div>

	<bottom></bottom>
</div>
<script type="text/javascript">
	Vue.use(httpVueLoader);
	const app = new Vue({
		el: "#productApp",
		data: {

		},
		created() {
			this.loadData();
		},
		methods: {
			loadData() {

			},
		},
		components: {
			'top-protal': 'url:../common/top-protal.vue',
			'bottom': 'url:../common/bottom.vue',
		},
	});
</script>
</body>
</html>